<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta 
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta 
    http-equiv="X-UA-Compatible" 
    content="ie=edge">
  <meta 
    name="theme-color" 
    content="#fff" 
    id="theme-color">
  <meta 
    name="description" 
    content="霜序廿的个人网站">
  <link 
    rel="icon" 
    href="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg">
  <title>从ES6到ES10的新特性总结</title>
  
    
      <meta 
        property="og:title" 
        content="从ES6到ES10的新特性总结">
    
    
      <meta 
        property="og:url" 
        content="https://shuangxunian.github.io/2022/01/15/summaryOfNewFeaturesFromES6ToES10/index.html">
    
    
      <meta 
        property="og:img" 
        content="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg">
    
    
      <meta 
        property="og:img" 
        content="如题目">
    
    
      <meta 
        property="og:type" 
        content="article">
      <meta 
        property="og:article:published_time" 
        content="2022-01-15">
      <meta 
        property="og:article:modified_time" 
        content="2022-01-15">
      <meta 
        property="og:article:author" 
        content="霜序廿">
      
        
          <meta 
            property="og:article:tag" 
            content="js">
        
      
    
  
  <script>
    function loadScript(url, cb) {
      var script = document.createElement('script');
      script.src = url;
      if (cb) script.onload = cb;
      script.async = true;
      document.body.appendChild(script);
    }
    function loadCSS(href, data, attr) {
      var sheet = document.createElement('link');
      sheet.ref = 'stylesheet';
      sheet.href = href;
      sheet.dataset[data] = attr;
      document.head.appendChild(sheet);
    }
    function changeCSS(cssFile, data, attr) {
      var oldlink = document.querySelector(data);
      var newlink = document.createElement("link");
      newlink.setAttribute("rel", "stylesheet");
      newlink.setAttribute("href", cssFile);
      newlink.dataset.prism = attr;
      document.head.replaceChild(newlink, oldlink);
    }
  </script>
  
    
      
      
      
      
        
        
        
        <script>
          function prismThemeChange() {
            if(document.getElementById('theme-color').dataset.mode === 'dark') {
              if(document.querySelector('[data-prism]')) {
                changeCSS('/js/lib/prism/prism-tomorrow.min.css', '[data-prism]', 'prism-tomorrow');
              } else {
                loadCSS('/js/lib/prism/prism-tomorrow.min.css', 'prism', 'prism-tomorrow');
              }
            } else {
              if(document.querySelector('[data-prism]')) {
                changeCSS('/js/lib/prism/prism.min.css', '[data-prism]', 'prism');
              } else {
                loadCSS('/js/lib/prism/prism.min.css', 'prism', 'prism');
              }
            }
          }
          prismThemeChange()
        </script>
      
      
        
        <link rel="stylesheet" href="/js/lib/prism/prism-line-numbers.min.css">
      
    
  
  <script>
    // control reverse button
    var reverseDarkList = {
      dark: 'light',
      light: 'dark'
    };
    var themeColor = {
      dark: '#1c1c1e',
      light: '#fff'
    }
    // get the data of css prefers-color-scheme
    var getCssMediaQuery = function() {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    };
    // reverse current darkmode setting function
    var reverseDarkModeSetting = function() {
      var setting = localStorage.getItem('user-color-scheme');
      if(reverseDarkList[setting]) {
        setting = reverseDarkList[setting];
      } else if(setting === null) {
        setting = reverseDarkList[getCssMediaQuery()];
      } else {
        return;
      }
      localStorage.setItem('user-color-scheme', setting);
      return setting;
    };
    // apply current darkmode setting
  </script>
  
    <script>
      var setDarkmode = function(mode) {
      var setting = mode || localStorage.getItem('user-color-scheme');
      if(setting === getCssMediaQuery()) {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else if(reverseDarkList[setting]) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
        document.getElementById('theme-color').dataset.mode = getCssMediaQuery();
        prismThemeChange();
      }
    };
    setDarkmode();
    </script>
  
  
  <link rel="preload" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css" as="style" >
  <link rel="preload" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.js" as="script">
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lozad.min.js" as="script">
  
  
  
  
  
  
  
  <link rel="stylesheet" href="/css/main.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css">
  
    <link rel="stylesheet" href="/js/lib/lightbox/baguetteBox.min.css">
  
<meta name="generator" content="Hexo 5.4.0"></head>

  <body>
    <div class="wrapper">
       
      <nav class="navbar">
  <div class="navbar-logo">
    <span class="navbar-logo-main">
      
        <img 
          class="navbar-logo-img" 
          src="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg" 
          alt="blog logo">
      
      <span class="navbar-logo-dsc">霜序廿的个人网站</span>
    </span>
  </div>
  <div class="navbar-menu">
    
      <a 
        href="/" 
        class="navbar-menu-item">
        
          首页
        
      </a>
    
      <a 
        href="/archives" 
        class="navbar-menu-item">
        
          归档
        
      </a>
    
      <a 
        href="/tags" 
        class="navbar-menu-item">
        
          标签
        
      </a>
    
      <a 
        href="/categories" 
        class="navbar-menu-item">
        
          分类
        
      </a>
    
      <a 
        href="/about" 
        class="navbar-menu-item">
        
          关于
        
      </a>
    
      <a 
        href="/links" 
        class="navbar-menu-item">
        
          友链
        
      </a>
    
    <a 
      class="navbar-menu-item darknavbar" 
      id="dark">
      <i class="iconfont icon-weather"></i>
    </a>
    <a 
      class="navbar-menu-item searchnavbar" 
      id="search">
      <i 
        class="iconfont icon-search" 
        style="font-size: 1.2rem; font-weight: 400;">
      </i>
    </a>
  </div>
</nav> 
      
      <div 
        id="local-search" 
        style="display: none">
        <input
          class="navbar-menu-item"
          id="search-input"
          placeholder="请输入搜索内容..." />
        <div id="search-content"></div>
      </div>
      
      <div class="section-wrap">
        <div class="container">
          <div class="columns">
            <main class="main-column">
<article class="card card-content">
  <header>
    <h1 class="post-title">
      从ES6到ES10的新特性总结
    </h1>
  </header>
  <div class="post-meta post-show-meta">
    <time datetime="2022-01-15T11:27:41.340Z">
      <i 
        class="iconfont icon-calendar" 
        style="margin-right: 2px;">
      </i>
      <span>2022-01-15</span>
    </time>
    
      <span class="dot"></span>
      
        <a 
          href="/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/" 
          class="post-meta-link">
          技术文章
        </a>
      
    
    
      <span class="dot"></span>
      <span>9k 字</span>
    
  </div>
  
    <div 
      class="post-meta post-show-meta" 
      style="margin-top: -10px;">
      <div style="display: flex; align-items: center;">
        <i 
          class="iconfont icon-biaoqian" 
          style="margin-right: 2px; font-size: 1.15rem;">
        </i>
        
          
          <a 
            href="/tags/js/" 
            class="post-meta-link">
            js
          </a>
        
      </div>
    </div>
  
  </header>
  <div 
    id="section" 
    class="post-content">
    <h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。</p>
<h2 id="ES6-ES2015"><a href="#ES6-ES2015" class="headerlink" title="ES6(ES2015)"></a>ES6(ES2015)</h2><blockquote>
<p>ES6是一次重大的革新，比起过去的版本，改动比较大，本文仅对常用的API以及语法糖进行讲解。</p>
</blockquote>
<h3 id="Let-和-Const"><a href="#Let-和-Const" class="headerlink" title="Let 和 Const"></a>Let 和 Const</h3><p>在ES6以前，<code>JS</code>只有<code>var</code>一种声明方式，但是在ES6之后，就多了<code>let</code>跟<code>const</code>这两种方式。用<code>var</code>定义的变量没有块级作用域的概念，而<code>let</code>跟<code>const</code>则会有，因为这三个关键字创建是不一样的。</p>
<p>区别如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">10</span>
    <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">20</span>
    <span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token number">30</span>
<span class="token punctuation">&#125;</span>
a <span class="token comment">// 10</span>
b <span class="token comment">// Uncaught ReferenceError: b is not defined</span>
c <span class="token comment">// c is not defined</span>
<span class="token keyword">let</span> d <span class="token operator">=</span> <span class="token number">40</span>
<span class="token keyword">const</span> e <span class="token operator">=</span> <span class="token number">50</span>
d <span class="token operator">=</span> <span class="token number">60</span>
d <span class="token comment">// 60</span>
e <span class="token operator">=</span> <span class="token number">70</span> <span class="token comment">// VM231:1 Uncaught TypeError: Assignment to constant variable.</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<table>
<thead>
<tr>
<th align="left"></th>
<th align="left">var</th>
<th align="left">let</th>
<th align="left">const</th>
</tr>
</thead>
<tbody><tr>
<td align="left">变量提升</td>
<td align="left">√</td>
<td align="left">×</td>
<td align="left">×</td>
</tr>
<tr>
<td align="left">全局变量</td>
<td align="left">√</td>
<td align="left">×</td>
<td align="left">×</td>
</tr>
<tr>
<td align="left">重复声明</td>
<td align="left">√</td>
<td align="left">×</td>
<td align="left">×</td>
</tr>
<tr>
<td align="left">重新赋值</td>
<td align="left">√</td>
<td align="left">√</td>
<td align="left">×</td>
</tr>
<tr>
<td align="left">暂时死区</td>
<td align="left">×</td>
<td align="left">√</td>
<td align="left">√</td>
</tr>
<tr>
<td align="left">块作用域</td>
<td align="left">×</td>
<td align="left">√</td>
<td align="left">√</td>
</tr>
<tr>
<td align="left">只声明不初始化</td>
<td align="left">√</td>
<td align="left">√</td>
<td align="left">×</td>
</tr>
</tbody></table>
<h3 id="类（Class）"><a href="#类（Class）" class="headerlink" title="类（Class）"></a>类（Class）</h3><p>在ES6之前，如果我们要生成一个实例对象，传统的方法就是写一个构造函数，例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age
<span class="token punctuation">&#125;</span>
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">information</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> <span class="token string">'My name is '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">', I am '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是在ES6之后，我们只需要写成以下形式：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">&#123;</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
        <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age
    <span class="token punctuation">&#125;</span>
    <span class="token function">information</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">return</span> <span class="token string">'My name is '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">', I am '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="箭头函数（Arrow-function）"><a href="#箭头函数（Arrow-function）" class="headerlink" title="箭头函数（Arrow function）"></a>箭头函数（Arrow function）</h3><p>箭头函数表达式的语法比函数表达式更简洁，并且没有自己的<code>this</code>，<code>arguments</code>，<code>super</code>或 <code>new.target</code>。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。</p>
<p>在ES6以前，我们写函数一般是：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span>
<span class="token keyword">var</span> newList <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> item <span class="token operator">*</span> item
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是在ES6里，我们可以：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> newList <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item <span class="token operator">*</span> item<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<p>看，是不是简洁了不少</p>
<h3 id="函数参数默认值（Function-parameter-defaults）"><a href="#函数参数默认值（Function-parameter-defaults）" class="headerlink" title="函数参数默认值（Function parameter defaults）"></a>函数参数默认值（Function parameter defaults）</h3><p>在ES6之前，如果我们写函数需要定义初始值的时候，需要这么写：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">config</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> data <span class="token operator">=</span> data <span class="token operator">||</span> <span class="token string">'data is empty'</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>这样看起来也没有问题，但是如果参数的布尔值为<strong>falsy</strong>时就会出问题，例如我们这样调用config：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">config</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
<span class="token function">config</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<p>那么结果就永远是后面的值</p>
<p>如果我们用函数参数默认值就没有这个问题，写法如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">(</span>data <span class="token operator">=</span> <span class="token string">'data is empty'</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h3 id="模板字符串（Template-string）"><a href="#模板字符串（Template-string）" class="headerlink" title="模板字符串（Template string）"></a>模板字符串（Template string）</h3><p>在ES6之前，如果我们要拼接字符串，则需要像这样：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">'kris'</span>
<span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">24</span>
<span class="token keyword">var</span> info <span class="token operator">=</span> <span class="token string">'My name is '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">', I am '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>但是在ES6之后，我们只需要写成以下形式：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'kris'</span>
<span class="token keyword">const</span> age <span class="token operator">=</span> <span class="token number">24</span>
<span class="token keyword">const</span> info <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">My name is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>name<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">, I am </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>age<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h3 id="解构赋值（Destructuring-assignment）"><a href="#解构赋值（Destructuring-assignment）" class="headerlink" title="解构赋值（Destructuring assignment）"></a>解构赋值（Destructuring assignment）</h3><p>我们通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。</p>
<p>比如我们需要交换两个变量的值，在ES6之前我们可能需要：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">10</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">20</span>
<span class="token keyword">var</span> temp <span class="token operator">=</span> a
a <span class="token operator">=</span> b
b <span class="token operator">=</span> temp<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是在ES6里，我们有：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">20</span>
<span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>b<span class="token punctuation">,</span> a<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>是不是方便很多</p>
<h3 id="模块化（Module）"><a href="#模块化（Module）" class="headerlink" title="模块化（Module）"></a>模块化（Module）</h3><p>在ES6之前，JS并没有模块化的概念，有的也只是社区定制的类似CommonJS和AMD之类的规则。例如基于CommonJS的NodeJS：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// circle.js</span>
<span class="token comment">// 输出</span>
<span class="token keyword">const</span> <span class="token punctuation">&#123;</span> <span class="token constant">PI</span> <span class="token punctuation">&#125;</span> <span class="token operator">=</span> Math
exports<span class="token punctuation">.</span><span class="token function-variable function">area</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">r</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token constant">PI</span> <span class="token operator">*</span> r <span class="token operator">**</span> <span class="token number">2</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">circumference</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">r</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token number">2</span> <span class="token operator">*</span> <span class="token constant">PI</span> <span class="token operator">*</span> r

<span class="token comment">// index.js</span>
<span class="token comment">// 输入</span>
<span class="token keyword">const</span> circle <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./circle.js'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">半径为 4 的圆的面积是 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>circle<span class="token punctuation">.</span><span class="token function">area</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>在ES6之后我们则可以写成以下形式：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// circle.js</span>
<span class="token comment">// 输出</span>
<span class="token keyword">const</span> <span class="token punctuation">&#123;</span> <span class="token constant">PI</span> <span class="token punctuation">&#125;</span> <span class="token operator">=</span> Math
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">area</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">r</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token constant">PI</span> <span class="token operator">*</span> r <span class="token operator">**</span> <span class="token number">2</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">circumference</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">r</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token number">2</span> <span class="token operator">*</span> <span class="token constant">PI</span> <span class="token operator">*</span> r

<span class="token comment">// index.js</span>
<span class="token comment">// 输入</span>
<span class="token keyword">import</span> <span class="token punctuation">&#123;</span>
    area
<span class="token punctuation">&#125;</span> <span class="token operator">=</span> <span class="token string">'./circle.js'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">半径为 4 的圆的面积是: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token function">area</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="扩展操作符（Spread-operator）"><a href="#扩展操作符（Spread-operator）" class="headerlink" title="扩展操作符（Spread operator）"></a>扩展操作符（Spread operator）</h3><p>扩展操作符可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。</p>
<p>比如在ES5的时候，我们要对一个数组的元素进行相加，在不使用<code>reduce</code>或者<code>reduceRight</code>的场合，我们需要：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> z</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> x <span class="token operator">+</span> y <span class="token operator">+</span> z<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span>
<span class="token keyword">var</span> total <span class="token operator">=</span> <span class="token function">sum</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> list<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是如果我们使用扩展操作符，只需要如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> z</span><span class="token punctuation">)</span> <span class="token operator">=></span> x <span class="token operator">+</span> y <span class="token operator">+</span> z
<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> total <span class="token operator">=</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token operator">...</span>list<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>非常的简单，但是要注意的是扩展操作符只能用于可迭代对象</p>
<p>如果是下面的情况，是会报错的：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token string">'key1'</span><span class="token operator">:</span> <span class="token string">'value1'</span><span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>obj<span class="token punctuation">]</span> <span class="token comment">// TypeError: obj is not iterable</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<h3 id="对象属性简写（Object-attribute-shorthand）"><a href="#对象属性简写（Object-attribute-shorthand）" class="headerlink" title="对象属性简写（Object attribute shorthand）"></a>对象属性简写（Object attribute shorthand）</h3><p>在ES6之前，如果我们要将某个变量赋值为同样名称的对象元素，则需要：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> cat <span class="token operator">=</span> <span class="token string">'Miaow'</span>
<span class="token keyword">var</span> dog <span class="token operator">=</span> <span class="token string">'Woof'</span>
<span class="token keyword">var</span> bird <span class="token operator">=</span> <span class="token string">'Peet peet'</span>

<span class="token keyword">var</span> someObject <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  cat<span class="token operator">:</span> cat<span class="token punctuation">,</span>
  dog<span class="token operator">:</span> dog<span class="token punctuation">,</span>
  bird<span class="token operator">:</span> bird
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是在ES6里我们就方便很多：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> cat <span class="token operator">=</span> <span class="token string">'Miaow'</span>
<span class="token keyword">let</span> dog <span class="token operator">=</span> <span class="token string">'Woof'</span>
<span class="token keyword">let</span> bird <span class="token operator">=</span> <span class="token string">'Peet peet'</span>

<span class="token keyword">let</span> someObject <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  cat<span class="token punctuation">,</span>
  dog<span class="token punctuation">,</span>
  bird
<span class="token punctuation">&#125;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>someObject<span class="token punctuation">)</span>

<span class="token comment">//&#123;</span>
<span class="token comment">//  cat: "Miaow",</span>
<span class="token comment">//  dog: "Woof",</span>
<span class="token comment">//  bird: "Peet peet"</span>
<span class="token comment">//&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h3><p>Promise 是ES6提供的一种异步解决方案，比回调函数更加清晰明了。</p>
<p><code>Promise</code> 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，分别是：</p>
<ol>
<li>等待中（pending）</li>
<li>完成了 （resolved）</li>
<li>拒绝了（rejected）</li>
</ol>
<p>这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'success'</span><span class="token punctuation">)</span>
  <span class="token comment">// 无效</span>
  <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'reject'</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>当我们在构造 <code>Promise</code> 的时候，构造函数内部的代码是立即执行的</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'new Promise'</span><span class="token punctuation">)</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'success'</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'finifsh'</span><span class="token punctuation">)</span>
<span class="token comment">// new Promise -> finifsh</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p><code>Promise</code> 实现了链式调用，也就是说每次调用 <code>then</code> 之后返回的都是一个 <code>Promise</code>，并且是一个全新的 <code>Promise</code>，原因也是因为状态不可变。如果你在 <code>then</code> 中 使用了 <code>return</code>，那么 <code>return</code> 的值会被 <code>Promise.resolve()</code> 包装</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token comment">// => 1</span>
    <span class="token keyword">return</span> <span class="token number">2</span> <span class="token comment">// 包装成 Promise.resolve(2)</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token comment">// => 2</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>当然了，<code>Promise</code> 也很好地解决了回调地狱的问题，例如：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">ajax</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
    <span class="token comment">// 处理逻辑</span>
    <span class="token function">ajax</span><span class="token punctuation">(</span>url1<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
        <span class="token comment">// 处理逻辑</span>
        <span class="token function">ajax</span><span class="token punctuation">(</span>url2<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
            <span class="token comment">// 处理逻辑</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>可以改写成：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">ajax</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
      <span class="token keyword">return</span> <span class="token function">ajax</span><span class="token punctuation">(</span>url1<span class="token punctuation">)</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
      <span class="token keyword">return</span> <span class="token function">ajax</span><span class="token punctuation">(</span>url2<span class="token punctuation">)</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="for…of"><a href="#for…of" class="headerlink" title="for…of"></a>for…of</h3><p><code>for...of</code>语句在可迭代对象（包括 <code>Array，Map，Set，String，TypedArray，arguments</code> 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。</p>
<p>例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> element <span class="token keyword">of</span> array1<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">// "a"</span>
<span class="token comment">// "b"</span>
<span class="token comment">// "c"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Symbol"><a href="#Symbol" class="headerlink" title="Symbol"></a>Symbol</h3><p><strong>symbol</strong> 是一种基本数据类型，<code>Symbol()</code>函数会返回<strong>symbol</strong>类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法：”<code>new Symbol()</code>“。</p>
<p>每个从<code>Symbol()</code>返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。</p>
<p>例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> symbol1 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> symbol2 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> symbol3 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> symbol1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "symbol"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>symbol3<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Symbol(foo)"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="迭代器（Iterator）-生成器（Generator）"><a href="#迭代器（Iterator）-生成器（Generator）" class="headerlink" title="迭代器（Iterator）/ 生成器（Generator）"></a>迭代器（Iterator）/ 生成器（Generator）</h3><p>迭代器（Iterator）是一种迭代的机制，为各种不同的数据结构提供统一的访问机制。任何数据结构只要内部有 Iterator 接口，就可以完成依次迭代操作。</p>
<p>一旦创建，迭代器对象可以通过重复调用next()显式地迭代，从而获取该对象每一级的值，直到迭代完，返回<code>&#123; value: undefined, done: true &#125;</code></p>
<p>虽然自定义的迭代器是一个有用的工具，但由于需要显式地维护其内部状态，因此需要谨慎地创建。生成器函数提供了一个强大的选择：它允许你定义一个包含自有迭代算法的函数， 同时它可以自动维护自己的状态。 生成器函数使用 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function*"><code>function*</code></a>语法编写。 最初调用时，生成器函数不执行任何代码，而是返回一种称为Generator的迭代器。 通过调用生成器的下一个方法消耗值时，Generator函数将执行，直到遇到yield关键字。</p>
<p>可以根据需要多次调用该函数，并且每次都返回一个新的Generator，但每个Generator只能迭代一次。</p>
<p>所以我们可以有以下例子：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">makeRangeIterator</span><span class="token punctuation">(</span><span class="token parameter">start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> end <span class="token operator">=</span> <span class="token number">Infinity</span><span class="token punctuation">,</span> step <span class="token operator">=</span> <span class="token number">1</span></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> start<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> end<span class="token punctuation">;</span> i <span class="token operator">+=</span> step<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">yield</span> i<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token function">makeRangeIterator</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// &#123;value: 1, done: false&#125;</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// &#123;value: 3, done: false&#125;</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// &#123;value: 5, done: false&#125;</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// &#123;value: 7, done: false&#125;</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// &#123;value: 9, done: false&#125;</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// &#123;value: undefined, done: true&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Set-WeakSet"><a href="#Set-WeakSet" class="headerlink" title="Set/WeakSet"></a>Set/WeakSet</h3><p><code>Set</code> 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。</p>
<p>所以我们可以通过<code>Set</code>实现数组去重</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">32</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>numbers<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span> 
<span class="token comment">// [2, 3, 4, 5, 6, 7, 32]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p><code>WeakSet</code> 结构与 <code>Set</code> 类似，但区别有以下两点：</p>
<ul>
<li><code>WeakSet</code> 对象中只能存放对象引用, 不能存放值, 而 <code>Set</code> 对象都可以。</li>
<li><code>WeakSet</code> 对象中存储的对象值都是被弱引用的, 如果没有其他的变量或属性引用这个对象值, 则这个对象值会被当成垃圾回收掉. 正因为这样, <code>WeakSet</code> 对象是无法被枚举的, 没有办法拿到它包含的所有元素。</li>
</ul>
<p>所以代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> ws <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WeakSet</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>

ws<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span>
ws<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>

ws<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span> <span class="token comment">// true</span>
ws<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span>    <span class="token comment">// false, 对象 foo 并没有被添加进 ws 中 </span>

ws<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span> <span class="token comment">// 从集合中删除 window 对象</span>
ws<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span>    <span class="token comment">// false, window 对象已经被删除了</span>

ws<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 清空整个 WeakSet 对象</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Map-WeakMap"><a href="#Map-WeakMap" class="headerlink" title="Map/WeakMap"></a>Map/WeakMap</h3><p><code>Map</code> 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。</p>
<p>例子如下，我们甚至可以使用<code>NaN</code>来作为键值：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> myMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
myMap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token string">"not a number"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

myMap<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "not a number"</span>

<span class="token keyword">var</span> otherNaN <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">"foo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
myMap<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>otherNaN<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "not a number"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p><code>WeakMap</code> 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。</p>
<p>跟<code>Map</code>的区别与<code>Set</code>跟<code>WeakSet</code>的区别相似，具体代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> wm1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WeakMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    wm2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WeakMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    wm3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WeakMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> o1 <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">o2</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    o3 <span class="token operator">=</span> window<span class="token punctuation">;</span>

wm1<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>o1<span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
wm1<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>o2<span class="token punctuation">,</span> <span class="token string">"azerty"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
wm2<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>o1<span class="token punctuation">,</span> o2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// value可以是任意值,包括一个对象</span>
wm2<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>o3<span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
wm2<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>wm1<span class="token punctuation">,</span> wm2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 键和值可以是任意对象,甚至另外一个WeakMap对象</span>
wm1<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>o2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "azerty"</span>
wm2<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>o2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined,wm2中没有o2这个键</span>
wm2<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>o3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined,值就是undefined</span>

wm1<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>o2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
wm2<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>o2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
wm2<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>o3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true (即使值是undefined)</span>

wm3<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>o1<span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
wm3<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>o1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 37</span>
wm3<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
wm3<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>o1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined,wm3已被清空</span>
wm1<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>o1<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// true</span>
wm1<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>o1<span class="token punctuation">)</span><span class="token punctuation">;</span>
wm1<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>o1<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// false</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Proxy-Reflect"><a href="#Proxy-Reflect" class="headerlink" title="Proxy/Reflect"></a>Proxy/Reflect</h3><p><code>Proxy</code> 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。</p>
<p><code>Reflect</code> 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 <code>Proxy</code> 的方法相同。<code>Reflect</code>不是一个函数对象，因此它是不可构造的。</p>
<p><code>Proxy</code>跟<code>Reflect</code>是非常完美的配合，例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">observe</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token punctuation">&#123;</span>
            <span class="token function">get</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
                <span class="token keyword">return</span> Reflect<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> key<span class="token punctuation">)</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
            <span class="token function">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> proxy<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
                  <span class="token function">callback</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
                  target<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span>
                    <span class="token keyword">return</span> Reflect<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> proxy<span class="token punctuation">)</span>
            <span class="token punctuation">&#125;</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">const</span> FooBar <span class="token operator">=</span> <span class="token punctuation">&#123;</span> open<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> FooBarObserver <span class="token operator">=</span> <span class="token function">observe</span><span class="token punctuation">(</span>FooBar<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">property<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  property <span class="token operator">===</span> <span class="token string">'open'</span> <span class="token operator">&amp;&amp;</span> value 
          <span class="token operator">?</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'FooBar is open!!!'</span><span class="token punctuation">)</span> 
          <span class="token operator">:</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'keep waiting'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>FooBarObserver<span class="token punctuation">.</span>open<span class="token punctuation">)</span> <span class="token comment">// false</span>
FooBarObserver<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token comment">// FooBar is open!!!</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>当然也不是什么都可以被代理的，如果对象带有<code>configurable: false</code> 跟<code>writable: false</code> 属性，则代理失效。</p>
<h3 id="Regex对象的扩展"><a href="#Regex对象的扩展" class="headerlink" title="Regex对象的扩展"></a>Regex对象的扩展</h3><h4 id="正则新增符号"><a href="#正则新增符号" class="headerlink" title="正则新增符号"></a>正则新增符号</h4><ul>
<li><p><code>i</code> 修饰符</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// i 修饰符</span>
<span class="token operator">/</span><span class="token punctuation">[</span>a<span class="token operator">-</span>z<span class="token punctuation">]</span><span class="token operator">/</span>i<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'\u212A'</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token operator">/</span><span class="token punctuation">[</span>a<span class="token operator">-</span>z<span class="token punctuation">]</span><span class="token operator">/</span>iu<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'\u212A'</span><span class="token punctuation">)</span> <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></li>
<li><p><code>y</code>修饰符</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// y修饰符</span>
<span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token string">'aaa_aa_a'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> r1 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">a+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>
<span class="token keyword">var</span> r2 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">a+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">y</span></span><span class="token punctuation">;</span>

r1<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token comment">// ["aaa"]</span>
r2<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token comment">// ["aaa"]</span>

r1<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token comment">// ["aa"]</span>
r2<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token comment">// null</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li><p>String.prototype.flags</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 查看RegExp构造函数的修饰符</span>
<span class="token keyword">var</span> regex <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">'xyz'</span><span class="token punctuation">,</span> <span class="token string">'i'</span><span class="token punctuation">)</span>
regex<span class="token punctuation">.</span>flags <span class="token comment">// 'i'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></li>
<li><p>unicode模式</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token string">'𠮷'</span>
<span class="token operator">/</span><span class="token operator">^</span><span class="token punctuation">.</span>$<span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token operator">/</span><span class="token operator">^</span><span class="token punctuation">.</span>$<span class="token operator">/</span>u<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></li>
<li><p>u转义</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// u转义</span>
<span class="token operator">/</span>\<span class="token punctuation">,</span><span class="token operator">/</span> <span class="token comment">// /\,/</span>
<span class="token operator">/</span>\<span class="token punctuation">,</span><span class="token operator">/</span>u <span class="token comment">// 报错 没有u修饰符时，逗号前面的反斜杠是无效的，加了u修饰符就报错。</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></li>
<li><p>引用</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token constant">RE_TWICE</span> <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^(?&lt;word>[a-z]+)!\k&lt;word>$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token constant">RE_TWICE</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'abc!abc'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token constant">RE_TWICE</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'abc!ab'</span><span class="token punctuation">)</span> <span class="token comment">// false</span>

<span class="token keyword">const</span> <span class="token constant">RE_TWICE</span> <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^(?&lt;word>[a-z]+)!\1$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token constant">RE_TWICE</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'abc!abc'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token constant">RE_TWICE</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'abc!ab'</span><span class="token punctuation">)</span> <span class="token comment">// false</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
</ul>
<h4 id="字符串方法的实现改为调用RegExp方法"><a href="#字符串方法的实现改为调用RegExp方法" class="headerlink" title="字符串方法的实现改为调用RegExp方法"></a>字符串方法的实现改为调用<code>RegExp</code>方法</h4><ul>
<li><code>String.prototype.match</code> 调用 <code>RegExp.prototype[Symbol.match]</code></li>
<li><code>String.prototype.replace</code> 调用 <code>RegExp.prototype[Symbol.replace]</code></li>
<li><code>String.prototype.search</code> 调用 <code>RegExp.prototype[Symbol.search]</code></li>
<li><code>String.prototype.split</code> 调用 <code>RegExp.prototype[Symbol.split]</code></li>
</ul>
<h4 id="正则新增属性"><a href="#正则新增属性" class="headerlink" title="正则新增属性"></a>正则新增属性</h4><ul>
<li><p><code>RegExp.prototype.sticky</code> 表示是否有<code>y</code>修饰符</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">hello\d</span><span class="token regex-delimiter">/</span><span class="token regex-flags">y</span></span><span class="token punctuation">.</span>sticky <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li><p><code>RegExp.prototype.flags</code>获取修饰符</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">abc</span><span class="token regex-delimiter">/</span><span class="token regex-flags">ig</span></span><span class="token punctuation">.</span>flags <span class="token comment">// 'gi'</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
</ul>
<h3 id="Math对象的扩展"><a href="#Math对象的扩展" class="headerlink" title="Math对象的扩展"></a>Math对象的扩展</h3><ul>
<li><code>二进制表示法</code> : <code>0b或0B开头</code>表示二进制(<code>0bXX</code>或<code>0BXX</code>)</li>
<li><code>二进制表示法</code> : <code>0b或0B开头</code>表示二进制(<code>0bXX</code>或<code>0BXX</code>)</li>
<li><code>八进制表示法</code> : <code>0o或0O开头</code>表示二进制(<code>0oXX</code>或<code>0OXX</code>)</li>
<li><code>Number.EPSILON</code> : 数值最小精度</li>
<li><code>Number.MIN_SAFE_INTEGER</code> : 最小安全数值(<code>-2^53</code>)</li>
<li><code>Number.MAX_SAFE_INTEGER</code> : 最大安全数值(<code>2^53</code>)</li>
<li><code>Number.parseInt()</code> : 返回转换值的整数部分</li>
<li><code>Number.parseFloat()</code> : 返回转换值的浮点数部分</li>
<li><code>Number.isFinite()</code> : 是否为有限数值</li>
<li><code>Number.isNaN()</code> : 是否为NaN</li>
<li><code>Number.isInteger()</code> : 是否为整数</li>
<li><code>Number.isSafeInteger()</code> : 是否在数值安全范围内</li>
<li><code>Math.trunc()</code> : 返回数值整数部分</li>
<li><code>Math.sign()</code> : 返回数值类型(<code>正数1</code>、<code>负数-1</code>、<code>零0</code>)</li>
<li><code>Math.cbrt()</code> : 返回数值立方根</li>
<li><code>Math.clz32()</code> : 返回数值的32位无符号整数形式</li>
<li><code>Math.imul()</code> : 返回两个数值相乘</li>
<li><code>Math.fround()</code> : 返回数值的32位单精度浮点数形式</li>
<li><code>Math.hypot()</code> : 返回所有数值平方和的平方根</li>
<li><code>Math.expm1()</code> : 返回<code>e^n - 1</code></li>
<li><code>Math.log1p()</code> : 返回<code>1 + n</code>的自然对数(<code>Math.log(1 + n)</code>)</li>
<li><code>Math.log10()</code> : 返回以10为底的n的对数</li>
<li><code>Math.log2()</code> : 返回以2为底的n的对数</li>
<li><code>Math.sinh()</code> : 返回n的双曲正弦</li>
<li><code>Math.cosh()</code> : 返回n的双曲余弦</li>
<li><code>Math.tanh()</code> : 返回n的双曲正切</li>
<li><code>Math.asinh()</code> : 返回n的反双曲正弦</li>
<li><code>Math.acosh()</code> : 返回n的反双曲余弦</li>
<li><code>Math.atanh()</code> : 返回n的反双曲正切</li>
</ul>
<h3 id="Array对象的扩展"><a href="#Array对象的扩展" class="headerlink" title="Array对象的扩展"></a>Array对象的扩展</h3><ul>
<li><p><code>Array.prototype.from</code>：转换具有<code>Iterator接口</code>的数据结构为真正数组，返回新数组。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// ["f", "o", "o"]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token parameter">x</span> <span class="token operator">=></span> x <span class="token operator">+</span> x<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [2, 4, 6]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></li>
<li><p><code>Array.prototype.of()</code>：转换一组值为真正数组，返回新数组。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">Array<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span>       <span class="token comment">// [7] </span>
Array<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// [1, 2, 3]</span>

<span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span>          <span class="token comment">// [empty, empty, empty, empty, empty, empty]</span>
<span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span>    <span class="token comment">// [1, 2, 3]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li><p><code>Array.prototype.copyWithin()</code>：把指定位置的成员复制到其他位置，返回原数组</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array1<span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// ["d", "b", "c", "d", "e"]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array1<span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// ["d", "d", "e", "d", "e"]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li><p><code>Array.prototype.find()</code>：返回第一个符合条件的成员</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span>

<span class="token keyword">const</span> found <span class="token operator">=</span> array1<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">element</span> <span class="token operator">=></span> element <span class="token operator">></span> <span class="token number">10</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>found<span class="token punctuation">)</span> <span class="token comment">// 12</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li><p><code>Array.prototype.findIndex()</code>：返回第一个符合条件的成员索引值</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span>

<span class="token keyword">const</span> <span class="token function-variable function">isLargeNumber</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token operator">=></span> element <span class="token operator">></span> <span class="token number">13</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array1<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>isLargeNumber<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 3</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li><p><code>Array.prototype.fill()</code>：根据指定值填充整个数组，返回原数组</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array1<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [1, 2, 0, 0]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array1<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [1, 5, 5, 5]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array1<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [6, 6, 6, 6]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li><p><code>Array.prototype.keys()</code>：返回以索引值为遍历器的对象</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> iterator <span class="token operator">=</span> array1<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> key <span class="token keyword">of</span> iterator<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">// 0</span>
<span class="token comment">// 1</span>
<span class="token comment">// 2</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li><p><code>Array.prototype.values()</code>：返回以属性值为遍历器的对象</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> iterator <span class="token operator">=</span> array1<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> key <span class="token keyword">of</span> iterator<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">// a</span>
<span class="token comment">// b</span>
<span class="token comment">// c</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li><p><code>Array.prototype.entries()</code>：返回以索引值和属性值为遍历器的对象</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> iterator <span class="token operator">=</span> array1<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// [0, "a"]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// [1, "b"]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li><p><code>数组空位</code>：ES6明确将数组空位转为<code>undefined</code>或者<code>empty</code></p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [ "a", undefined, "b" ]</span>
<span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token comment">// [ "a", undefined, "b" ]</span>
<span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">//  [empty × 3]</span>
<span class="token punctuation">[</span><span class="token punctuation">,</span><span class="token string">'a'</span><span class="token punctuation">]</span> <span class="token comment">// [empty, "a"]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li>
</ul>
<h2 id="ES7-ES2016"><a href="#ES7-ES2016" class="headerlink" title="ES7(ES2016)"></a>ES7(ES2016)</h2><h3 id="Array-prototype-includes"><a href="#Array-prototype-includes" class="headerlink" title="Array.prototype.includes()"></a>Array.prototype.includes()</h3><p><code>includes()</code> 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。</p>
<p>代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array1<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>

<span class="token keyword">const</span> pets <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'cat'</span><span class="token punctuation">,</span> <span class="token string">'dog'</span><span class="token punctuation">,</span> <span class="token string">'bat'</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pets<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'cat'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pets<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'at'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="幂运算符"><a href="#幂运算符" class="headerlink" title="幂运算符"></a>幂运算符</h3><p>幂运算符 ** ，具有与Math.pow()一样的功能，代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token operator">**</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token comment">// 1024</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 1024</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<h3 id="模板字符串（Template-string）-1"><a href="#模板字符串（Template-string）-1" class="headerlink" title="模板字符串（Template string）"></a>模板字符串（Template string）</h3><p>自ES7起，带标签的模版字面量遵守以下转义序列的规则：</p>
<ul>
<li>Unicode字符以”\u”开头，例如<code>\u00A9</code></li>
<li>Unicode码位用”\u{}”表示，例如<code>\u&#123;2F804&#125;</code></li>
<li>十六进制以”\x”开头，例如<code>\xA9</code></li>
<li>八进制以””和数字开头，例如<code>\251</code></li>
</ul>
<p>这表示类似下面这种带标签的模版是有问题的，因为对于每一个ECMAScript语法，解析器都会去查找有效的转义序列，但是只能得到这是一个形式错误的语法：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">latex<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\unicode</span><span class="token template-punctuation string">`</span></span>
<span class="token comment">// 在较老的ECMAScript版本中报错（ES2016及更早）</span>
<span class="token comment">// SyntaxError: malformed Unicode character escape sequence</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h2 id="ES8-ES2017"><a href="#ES8-ES2017" class="headerlink" title="ES8(ES2017)"></a>ES8(ES2017)</h2><h3 id="async-await"><a href="#async-await" class="headerlink" title="async/await"></a>async/await</h3><p>虽然<code>Promise</code>可以解决回调地狱的问题，但是链式调用太多，则会变成另一种形式的回调地狱 —— 面条地狱，所以在ES8里则出现了<code>Promise</code>的语法糖<code>async/await</code>，专门解决这个问题。</p>
<p>我们先看一下下面的<code>Promise</code>代码：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">myBlob</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
          <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span>
          <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span>
          image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL
          document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>然后再看看<code>async/await</code>版的，这样看起来是不是更清晰了。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span>
      <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span>
      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span>
      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL
      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>当然，如果你喜欢，你甚至可以两者混用</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span>
      <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span>
      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span>
      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL
      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Object-values"><a href="#Object-values" class="headerlink" title="Object.values()"></a>Object.values()</h3><p><code>Object.values()</code>方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。</p>
<p>代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> object1 <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
      a<span class="token operator">:</span> <span class="token string">'somestring'</span><span class="token punctuation">,</span>
      b<span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
      c<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">&#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>object1<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// ["somestring", 42, false]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Object-entries"><a href="#Object-entries" class="headerlink" title="Object.entries()"></a>Object.entries()</h3><p><code>Object.entries()</code>方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。</p>
<p>代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> object1 <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
      a<span class="token operator">:</span> <span class="token string">'somestring'</span><span class="token punctuation">,</span>
      b<span class="token operator">:</span> <span class="token number">42</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> <span class="token punctuation">[</span>key<span class="token punctuation">,</span> value<span class="token punctuation">]</span> <span class="token keyword">of</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>object1<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>key<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>value<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">// "a: somestring"</span>
<span class="token comment">// "b: 42"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="padStart"><a href="#padStart" class="headerlink" title="padStart()"></a>padStart()</h3><p><code>padStart()</code> 方法用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。</p>
<p>代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> str1 <span class="token operator">=</span> <span class="token string">'5'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str1<span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// "05"</span>

<span class="token keyword">const</span> fullNumber <span class="token operator">=</span> <span class="token string">'2034399002125581'</span>
<span class="token keyword">const</span> last4Digits <span class="token operator">=</span> fullNumber<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">4</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> maskedNumber <span class="token operator">=</span> last4Digits<span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span>fullNumber<span class="token punctuation">.</span>length<span class="token punctuation">,</span> <span class="token string">'*'</span><span class="token punctuation">)</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>maskedNumber<span class="token punctuation">)</span> <span class="token comment">// "************5581"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="padEnd"><a href="#padEnd" class="headerlink" title="padEnd()"></a>padEnd()</h3><p><code>padEnd()</code> 方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> str1 <span class="token operator">=</span> <span class="token string">'Breaded Mushrooms'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str1<span class="token punctuation">.</span><span class="token function">padEnd</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// "Breaded Mushrooms........"</span>
<span class="token keyword">const</span> str2 <span class="token operator">=</span> <span class="token string">'200'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str2<span class="token punctuation">.</span><span class="token function">padEnd</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// "200  "</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p>###函数参数结尾逗号（Function parameter lists and calls trailing commas）</p>
<p>在ES5里就添加了对象的尾逗号，不过并不支持函数参数，但是在ES8之后，便开始支持这一特性，代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 参数定义</span>
<span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
<span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span> 

<span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
<span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>

<span class="token keyword">class</span> <span class="token class-name">C</span> <span class="token punctuation">&#123;</span>
  <span class="token function">one</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  <span class="token function">two</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token function">one</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  <span class="token function">two</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

<span class="token comment">// 函数调用</span>
<span class="token function">f</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span>
<span class="token function">f</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span><span class="token punctuation">)</span>

Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是以下的方式是不合法的：</p>
<p>仅仅包含逗号的函数参数定义或者函数调用会抛出 SyntaxError。 而且，当使用剩余参数的时候，并不支持尾后逗号，例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span> <span class="token comment">// SyntaxError: missing formal parameter</span>
<span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>       <span class="token comment">// SyntaxError: expected expression, got ','</span>
<span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">,</span><span class="token punctuation">)</span>             <span class="token comment">// SyntaxError: expected expression, got ','</span>

<span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>p<span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span> <span class="token comment">// SyntaxError: parameter after rest parameter</span>
<span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>p<span class="token punctuation">,</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>        <span class="token comment">// SyntaxError: expected closing parenthesis, got ','</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>在解构里也可以使用，代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 带有尾后逗号的数组解构</span>
<span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>

<span class="token comment">// 带有尾后逗号的对象解构</span>
<span class="token keyword">var</span> o <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  p<span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span> 
  q<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> <span class="token punctuation">&#123;</span>p<span class="token punctuation">,</span> q<span class="token punctuation">,</span><span class="token punctuation">&#125;</span> <span class="token operator">=</span> o<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>同样地，在使用剩余参数时，会抛出 SyntaxError，代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> <span class="token operator">...</span>b<span class="token punctuation">,</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span> <span class="token comment">// SyntaxError: rest element may not have a trailing comma</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h3 id="ShareArrayBuffer（因安全问题，暂时在Chrome跟FireFox中被禁用）"><a href="#ShareArrayBuffer（因安全问题，暂时在Chrome跟FireFox中被禁用）" class="headerlink" title="ShareArrayBuffer（因安全问题，暂时在Chrome跟FireFox中被禁用）"></a>ShareArrayBuffer（因安全问题，暂时在Chrome跟FireFox中被禁用）</h3><p>SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区，类似于 ArrayBuffer 对象，它们都可以用来在共享内存（shared memory）上创建视图。与 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分离。</p>
<p>代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> sab <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SharedArrayBuffer</span><span class="token punctuation">(</span><span class="token number">1024</span><span class="token punctuation">)</span> <span class="token comment">// 必须实例化</span>
worker<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span>sab<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<h3 id="Atomics对象"><a href="#Atomics对象" class="headerlink" title="Atomics对象"></a>Atomics对象</h3><p><strong>Atomics对象</strong> 提供了一组静态方法用来对 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer"><code>SharedArrayBuffer</code></a> 对象进行原子操作。</p>
<p>方法如下：</p>
<ul>
<li><strong>Atomics.add()</strong> ：将指定位置上的数组元素与给定的值相加，并返回相加前该元素的值。</li>
<li>**Atomics.and()**：将指定位置上的数组元素与给定的值相与，并返回与操作前该元素的值。</li>
<li>**Atomics.compareExchange()**：如果数组中指定的元素与给定的值相等，则将其更新为新的值，并返回该元素原先的值。</li>
<li>**Atomics.exchange()**：将数组中指定的元素更新为给定的值，并返回该元素更新前的值。</li>
<li>**Atomics.load()**：返回数组中指定元素的值。</li>
<li>**Atomics.or()**：将指定位置上的数组元素与给定的值相或，并返回或操作前该元素的值。</li>
<li>**Atomics.store()**：将数组中指定的元素设置为给定的值，并返回该值。</li>
<li>**Atomics.sub()**：将指定位置上的数组元素与给定的值相减，并返回相减前该元素的值。</li>
<li>**Atomics.xor()**：将指定位置上的数组元素与给定的值相异或，并返回异或操作前该元素的值。</li>
<li>**Atomics.wait()**：检测数组中某个指定位置上的值是否仍然是给定值，是则保持挂起直到被唤醒或超时。返回值为 “ok”、“not-equal” 或 “time-out”。调用时，如果当前线程不允许阻塞，则会抛出异常（大多数浏览器都不允许在主线程中调用 wait()）。</li>
<li>**Atomics.wake()**：唤醒等待队列中正在数组指定位置的元素上等待的线程。返回值为成功唤醒的线程数量。</li>
<li>**Atomics.isLockFree(size)**：可以用来检测当前系统是否支持硬件级的原子操作。对于指定大小的数组，如果当前系统支持硬件级的原子操作，则返回 true；否则就意味着对于该数组，Atomics 对象中的各原子操作都只能用锁来实现。此函数面向的是技术专家。</li>
</ul>
<h3 id="Object-getOwnPropertyDescriptors"><a href="#Object-getOwnPropertyDescriptors" class="headerlink" title="Object.getOwnPropertyDescriptors()"></a>Object.getOwnPropertyDescriptors()</h3><p><code>Object.getOwnPropertyDescriptors()</code> 方法用来获取一个对象的所有自身属性的描述符。代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> object1 <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  property1<span class="token operator">:</span> <span class="token number">42</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">const</span> descriptors1 <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyDescriptors</span><span class="token punctuation">(</span>object1<span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>descriptors1<span class="token punctuation">.</span>property1<span class="token punctuation">.</span>writable<span class="token punctuation">)</span> <span class="token comment">// true</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>descriptors1<span class="token punctuation">.</span>property1<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 42</span>

<span class="token comment">// 浅拷贝一个对象</span>
Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>
  Object<span class="token punctuation">.</span><span class="token function">getPrototypeOf</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">,</span> 
  Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyDescriptors</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> 
<span class="token punctuation">)</span>

<span class="token comment">// 创建子类</span>
<span class="token keyword">function</span> <span class="token function">superclass</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
superclass<span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">// 在这里定义方法和属性</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">function</span> <span class="token function">subclass</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
subclass<span class="token punctuation">.</span>prototype <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>superclass<span class="token punctuation">.</span>prototype<span class="token punctuation">,</span> Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyDescriptors</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
  <span class="token comment">// 在这里定义方法和属性</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="ES9-ES2018"><a href="#ES9-ES2018" class="headerlink" title="ES9(ES2018)"></a>ES9(ES2018)</h2><h3 id="for-await…of"><a href="#for-await…of" class="headerlink" title="for await…of"></a>for await…of</h3><p><code>for await...of</code> 语句会在异步或者同步可迭代对象上创建一个迭代循环，包括 <code>String</code>，<code>Array</code>，<code>Array-like</code> 对象（比如<code>arguments</code> 或者<code>NodeList</code>)，<code>TypedArray</code>，<code>Map</code>， <code>Set</code>和自定义的异步或者同步可迭代对象。其会调用自定义迭代钩子，并为每个不同属性的值执行语句。</p>
<p>配合迭代异步生成器，例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">asyncGenerator</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span>
      <span class="token keyword">while</span> <span class="token punctuation">(</span>i <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">yield</span> i<span class="token operator">++</span>
      <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">for</span> <span class="token keyword">await</span> <span class="token punctuation">(</span>num <span class="token keyword">of</span> <span class="token function">asyncGenerator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 0</span>
<span class="token comment">// 1</span>
<span class="token comment">// 2</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="模板字符串（Template-string）-2"><a href="#模板字符串（Template-string）-2" class="headerlink" title="模板字符串（Template string）"></a>模板字符串（Template string）</h3><p>ES9开始，模板字符串允许嵌套支持常见转义序列，移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。</p>
<p>不过，非法转义序列在”cooked”当中仍然会体现出来。它们将以<code>undefined</code>元素的形式存在于”cooked”之中，代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">latex</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> 
 <span class="token keyword">return</span> <span class="token punctuation">&#123;</span> <span class="token string">"cooked"</span><span class="token operator">:</span> str<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">"raw"</span><span class="token operator">:</span> str<span class="token punctuation">.</span>raw<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span> 

latex<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\unicode</span><span class="token template-punctuation string">`</span></span> <span class="token comment">// &#123; cooked: undefined, raw: "\\unicode" &#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="正则表达式反向-lookbehind-断言"><a href="#正则表达式反向-lookbehind-断言" class="headerlink" title="正则表达式反向(lookbehind)断言"></a>正则表达式反向(lookbehind)断言</h3><p>首先我们得先知道什么是**断言(Assertion)**。</p>
<p>**断言(Assertion)**是一个对当前匹配位置之前或之后的字符的测试， 它不会实际消耗任何字符，所以断言也被称为“非消耗性匹配”或“非获取匹配”。</p>
<p>正则表达式的断言一共有 4 种形式：</p>
<ul>
<li><code>(?=pattern)</code> 零宽正向肯定断言(zero-width positive lookahead assertion)</li>
<li><code>(?!pattern)</code> 零宽正向否定断言(zero-width negative lookahead assertion)</li>
<li><code>(?&lt;=pattern)</code> 零宽反向肯定断言(zero-width positive lookbehind assertion)</li>
<li><code>(?&lt;!pattern)</code> 零宽反向否定断言(zero-width negative lookbehind assertion)</li>
</ul>
<p>在ES9之前，JavaScript 正则表达式，只支持正向断言。正向断言的意思是：当前位置后面的字符串应该满足断言，但是并不捕获。例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token string">'fishHeadfishTail'</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">fish(?=Head)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span> <span class="token comment">// ["fish"]</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>反向断言和正向断言的行为一样，只是方向相反。例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token string">'abc123'</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(?&lt;=(\d+)(\d+))$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span> <span class="token comment">//  ["", "1", "23", index: 6, input: "abc123", groups: undefined]</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h3 id="正则表达式-Unicode-转义"><a href="#正则表达式-Unicode-转义" class="headerlink" title="正则表达式 Unicode 转义"></a>正则表达式 Unicode 转义</h3><p>正则表达式中的Unicode转义符允许根据Unicode字符属性匹配Unicode字符。 它允许区分字符类型，例如大写和小写字母，数学符号和标点符号。</p>
<p>部分例子代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 匹配所有数字</span>
<span class="token keyword">const</span> regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\p&#123;Number&#125;+$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">u</span></span><span class="token punctuation">;</span>
regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'²³¹¼½¾'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'㉛㉜㉝'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>

<span class="token comment">// 匹配所有空格</span>
\p<span class="token punctuation">&#123;</span>White_Space<span class="token punctuation">&#125;</span>

<span class="token comment">// 匹配各种文字的所有字母，等同于 Unicode 版的 \w</span>
<span class="token punctuation">[</span>\p<span class="token punctuation">&#123;</span>Alphabetic<span class="token punctuation">&#125;</span>\p<span class="token punctuation">&#123;</span>Mark<span class="token punctuation">&#125;</span>\p<span class="token punctuation">&#123;</span>Decimal_Number<span class="token punctuation">&#125;</span>\p<span class="token punctuation">&#123;</span>Connector_Punctuation<span class="token punctuation">&#125;</span>\p<span class="token punctuation">&#123;</span>Join_Control<span class="token punctuation">&#125;</span><span class="token punctuation">]</span>

<span class="token comment">// 匹配各种文字的所有非字母的字符，等同于 Unicode 版的 \W</span>
<span class="token punctuation">[</span><span class="token operator">^</span>\p<span class="token punctuation">&#123;</span>Alphabetic<span class="token punctuation">&#125;</span>\p<span class="token punctuation">&#123;</span>Mark<span class="token punctuation">&#125;</span>\p<span class="token punctuation">&#123;</span>Decimal_Number<span class="token punctuation">&#125;</span>\p<span class="token punctuation">&#123;</span>Connector_Punctuation<span class="token punctuation">&#125;</span>\p<span class="token punctuation">&#123;</span>Join_Control<span class="token punctuation">&#125;</span><span class="token punctuation">]</span>

<span class="token comment">// 匹配 Emoji</span>
<span class="token operator">/</span>\p<span class="token punctuation">&#123;</span>Emoji_Modifier_Base<span class="token punctuation">&#125;</span>\p<span class="token punctuation">&#123;</span>Emoji_Modifier<span class="token punctuation">&#125;</span><span class="token operator">?</span><span class="token operator">|</span>\p<span class="token punctuation">&#123;</span>Emoji_Presentation<span class="token punctuation">&#125;</span><span class="token operator">|</span>\p<span class="token punctuation">&#123;</span>Emoji<span class="token punctuation">&#125;</span>\uFE0F<span class="token operator">/</span>gu

<span class="token comment">// 匹配所有的箭头字符</span>
<span class="token keyword">const</span> regexArrows <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\p&#123;Block=Arrows&#125;+$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">u</span></span><span class="token punctuation">;</span>
regexArrows<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'←↑→↓⇏⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇧⇩'</span><span class="token punctuation">)</span> <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>具体的属性列表可查看：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes</a></p>
<h3 id="正则表达式-s-dotAll-模式"><a href="#正则表达式-s-dotAll-模式" class="headerlink" title="正则表达式 s/dotAll 模式"></a>正则表达式 s/dotAll 模式</h3><p>在以往的版本里，JS的正则的<code>.</code>只能匹配emoji跟行终结符以外的所有文本，例如：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">.</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// false</span>
regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'\r'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// false</span>
regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'\u&#123;2028&#125;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'\u&#123;2029&#125;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>

regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'\v'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// true</span>
regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'\f'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// true</span>
regex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'\u&#123;0085&#125;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>

<span class="token operator">/</span>foo<span class="token punctuation">.</span>bar<span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'foo\nbar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// false</span>
<span class="token operator">/</span>foo<span class="token punctuation">[</span><span class="token operator">^</span><span class="token punctuation">]</span>bar<span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'foo\nbar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// true</span>

<span class="token operator">/</span>foo<span class="token punctuation">.</span>bar<span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'foo\nbar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// false</span>
<span class="token operator">/</span>foo<span class="token punctuation">[</span>\s<span class="token punctuation">]</span>bar<span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'foo\nbar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是在ES9之后，JS正则增加了一个新的标志 <code>s</code> 用来表示 dotAll，这可以匹配任意字符。代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">foo.bar</span><span class="token regex-delimiter">/</span><span class="token regex-flags">s</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'foo\nbar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// true</span>

<span class="token keyword">const</span> re <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">foo.bar</span><span class="token regex-delimiter">/</span><span class="token regex-flags">s</span></span><span class="token punctuation">;</span>  <span class="token comment">//  等价于 const re = new RegExp('foo.bar', 's');</span>
re<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'foo\nbar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// true</span>
re<span class="token punctuation">.</span>dotAll<span class="token punctuation">;</span>      <span class="token comment">// true</span>
re<span class="token punctuation">.</span>flags<span class="token punctuation">;</span>       <span class="token comment">// "s"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="正则表达式命名捕获组"><a href="#正则表达式命名捕获组" class="headerlink" title="正则表达式命名捕获组"></a>正则表达式命名捕获组</h3><p>在以往的版本里，JS的正则分组是无法命名的，所以容易混淆。例如下面获取年月日的例子，很容易让人搞不清哪个是月份，哪个是年份:</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> matched <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(\d&#123;4&#125;)-(\d&#123;2&#125;)-(\d&#123;2&#125;)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">'2019-01-01'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>matched<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 2019-01-01</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>matched<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 2019</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>matched<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 01</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>matched<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 01</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>ES9引入了命名捕获组，允许为每一个组匹配指定一个名字，既便于阅读代码，又便于引用。代码如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token constant">RE_DATE</span> <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(?&lt;year>\d&#123;4&#125;)-(?&lt;month>\d&#123;2&#125;)-(?&lt;day>\d&#123;2&#125;)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

<span class="token keyword">const</span> matchObj <span class="token operator">=</span> <span class="token constant">RE_DATE</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">'1999-12-31'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> year <span class="token operator">=</span> matchObj<span class="token punctuation">.</span>groups<span class="token punctuation">.</span>year<span class="token punctuation">;</span> <span class="token comment">// 1999</span>
<span class="token keyword">const</span> month <span class="token operator">=</span> matchObj<span class="token punctuation">.</span>groups<span class="token punctuation">.</span>month<span class="token punctuation">;</span> <span class="token comment">// 12</span>
<span class="token keyword">const</span> day <span class="token operator">=</span> matchObj<span class="token punctuation">.</span>groups<span class="token punctuation">.</span>day<span class="token punctuation">;</span> <span class="token comment">// 31</span>

<span class="token keyword">const</span> <span class="token constant">RE_OPT_A</span> <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^(?&lt;as>a+)?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> matchObj <span class="token operator">=</span> <span class="token constant">RE_OPT_A</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

matchObj<span class="token punctuation">.</span>groups<span class="token punctuation">.</span>as <span class="token comment">// undefined</span>
<span class="token string">'as'</span> <span class="token keyword">in</span> matchObj<span class="token punctuation">.</span>groups <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="对象扩展操作符"><a href="#对象扩展操作符" class="headerlink" title="对象扩展操作符"></a>对象扩展操作符</h3><p>ES6中添加了数组的扩展操作符，让我们在操作数组时更加简便，美中不足的是并不支持对象扩展操作符，但是在ES9开始，这一功能也得到了支持，例如：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> obj1 <span class="token operator">=</span> <span class="token punctuation">&#123;</span> foo<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> x<span class="token operator">:</span> <span class="token number">42</span> <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj2 <span class="token operator">=</span> <span class="token punctuation">&#123;</span> foo<span class="token operator">:</span> <span class="token string">'baz'</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">13</span> <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> clonedObj <span class="token operator">=</span> <span class="token punctuation">&#123;</span> <span class="token operator">...</span>obj1 <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token comment">// 克隆后的对象: &#123; foo: "bar", x: 42 &#125;</span>

<span class="token keyword">var</span> mergedObj <span class="token operator">=</span> <span class="token punctuation">&#123;</span> <span class="token operator">...</span>obj1<span class="token punctuation">,</span> <span class="token operator">...</span>obj2 <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token comment">// 合并后的对象: &#123; foo: "baz", x: 42, y: 13 &#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>上面便是一个简便的浅拷贝。这里有一点小提示，就是<code>Object.assign()</code> 函数会触发 <code>setters</code>，而展开语法则不会。所以不能替换也不能模拟<code>Object.assign()</code> 。</p>
<p>如果存在相同的属性名，只有最后一个会生效。</p>
<h3 id="Promise-prototype-finally"><a href="#Promise-prototype-finally" class="headerlink" title="Promise.prototype.finally()"></a>Promise.prototype.finally()</h3><p><code>finally()</code>方法会返回一个<code>Promise</code>，当promise的状态变更，不管是变成<code>rejected</code>或者<code>fulfilled</code>，最终都会执行<code>finally()</code>的回调。</p>
<p>例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span> 
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">finally</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span> 
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'结束'</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="ES10-ES2019"><a href="#ES10-ES2019" class="headerlink" title="ES10(ES2019)"></a>ES10(ES2019)</h2><h3 id="Array-prototype-flat-flatMap"><a href="#Array-prototype-flat-flatMap" class="headerlink" title="Array.prototype.flat() / flatMap()"></a>Array.prototype.flat() / flatMap()</h3><p><code>flat()</code> 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。</p>
<p><code>flatMap()</code>与 <code>map()</code> 方法和深度为1的 <code>flat()</code> 几乎相同.，不过它会首先使用映射函数映射每个元素，然后将结果压缩成一个新数组，这样效率会更高。</p>
<p>例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>

arr1<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=></span> <span class="token punctuation">[</span>x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [[2], [4], [6], [8]]</span>

arr1<span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=></span> <span class="token punctuation">[</span>x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [2, 4, 6, 8]</span>

<span class="token comment">// 深度为1</span>
arr1<span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">[</span>x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [[2], [4], [6], [8]]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p><code>flatMap()</code>可以代替<code>reduce()</code> 与 <code>concat()</code>，例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>
arr<span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=></span> <span class="token punctuation">[</span>x<span class="token punctuation">,</span> x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [1, 2, 2, 4, 3, 6, 4, 8]</span>
<span class="token comment">// 等价于</span>
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> x</span><span class="token punctuation">)</span> <span class="token operator">=></span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span>x<span class="token punctuation">,</span> x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// [1, 2, 2, 4, 3, 6, 4, 8]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p>但这是非常低效的，在每次迭代中，它创建一个必须被垃圾收集的新临时数组，并且它将元素从当前的累加器数组复制到一个新的数组中，而不是将新的元素添加到现有的数组中。</p>
<h3 id="String-prototype-trimStart-trimLeft-trimEnd-trimRight"><a href="#String-prototype-trimStart-trimLeft-trimEnd-trimRight" class="headerlink" title="String.prototype.trimStart() / trimLeft() / trimEnd() / trimRight()"></a>String.prototype.trimStart() / trimLeft() / trimEnd() / trimRight()</h3><p>在ES5中，我们可以通过<code>trim()</code>来去掉字符首尾的空格，但是却无法只去掉单边的，但是在ES10之后，我们可以实现这个功能。</p>
<p>如果我们要去掉开头的空格，可以使用<code>trimStart()</code>或者它的别名<code>trimLeft()</code>，</p>
<p>同样的，如果我们要去掉结尾的空格，我们可以使用<code>trimEnd()</code>或者它的别名<code>trimRight()</code>。</p>
<p>例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> Str <span class="token operator">=</span> <span class="token string">'   Hello world!  '</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Str<span class="token punctuation">)</span> <span class="token comment">// '   Hello world!  '</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Str<span class="token punctuation">.</span><span class="token function">trimStart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 'Hello world!  '</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Str<span class="token punctuation">.</span><span class="token function">trimLeft</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 'Hello world!  '</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Str<span class="token punctuation">.</span><span class="token function">trimEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// '   Hello world!'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Str<span class="token punctuation">.</span><span class="token function">trimRight</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// '   Hello world!'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>不过这里有一点要注意的是，<code>trimStart()</code>跟<code>trimEnd()</code>才是标准方法，<code>trimLeft()</code>跟<code>trimRight()</code>只是别名。</p>
<p>在某些引擎里（例如Chrome），有以下的等式：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token class-name">String</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>trimLeft<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">"trimStart"</span>

<span class="token class-name">String</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>trimRight<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">"trimEnd"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h3 id="Object-fromEntries"><a href="#Object-fromEntries" class="headerlink" title="Object.fromEntries()"></a>Object.fromEntries()</h3><p><code>Object.fromEntries()</code> 方法把键值对列表转换为一个对象，它是<code>Object.entries()</code>的反函数。</p>
<p>例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> entries <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  <span class="token punctuation">[</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token string">'baz'</span><span class="token punctuation">,</span> <span class="token number">42</span><span class="token punctuation">]</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> obj <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>entries<span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">// Object &#123; foo: "bar", baz: 42 &#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Symbol-prototype-description"><a href="#Symbol-prototype-description" class="headerlink" title="Symbol.prototype.description"></a>Symbol.prototype.description</h3><p><code>description</code> 是一个只读属性，它会返回<code>Symbol</code>对象的可选描述的字符串。与 <code>Symbol.prototype.toString()</code> 不同的是它不会包含<code>Symbol()</code>的字符串。例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// "Symbol(desc)"</span>
<span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>description<span class="token punctuation">;</span>  <span class="token comment">// "desc"</span>
<span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span>description<span class="token punctuation">;</span>      <span class="token comment">// ""</span>
<span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>description<span class="token punctuation">;</span>        <span class="token comment">// undefined</span>

<span class="token comment">// 具名 symbols</span>
Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// "Symbol(Symbol.iterator)"</span>
Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">.</span>description<span class="token punctuation">;</span> <span class="token comment">// "Symbol.iterator"</span>

<span class="token comment">//全局 symbols</span>
Symbol<span class="token punctuation">.</span><span class="token function">for</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// "Symbol(foo)"</span>
Symbol<span class="token punctuation">.</span><span class="token function">for</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>description<span class="token punctuation">;</span> <span class="token comment">// "foo"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="String-prototype-matchAll"><a href="#String-prototype-matchAll" class="headerlink" title="String.prototype.matchAll"></a>String.prototype.matchAll</h3><p><code>matchAll()</code> 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。并且返回一个不可重启的迭代器。例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> regexp <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">t(e)(st(\d?))</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'test1test2'</span>

str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>regexp<span class="token punctuation">)</span> <span class="token comment">// ['test1', 'test2']</span>
str<span class="token punctuation">.</span><span class="token function">matchAll</span><span class="token punctuation">(</span>regexp<span class="token punctuation">)</span> <span class="token comment">// RegExpStringIterator &#123;&#125;</span>
<span class="token punctuation">[</span><span class="token operator">...</span>str<span class="token punctuation">.</span><span class="token function">matchAll</span><span class="token punctuation">(</span>regexp<span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token comment">// [['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4], ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Function-prototype-toString-返回注释与空格"><a href="#Function-prototype-toString-返回注释与空格" class="headerlink" title="Function.prototype.toString() 返回注释与空格"></a>Function.prototype.toString() 返回注释与空格</h3><p>在以往的版本中，<code>Function.prototype.toString()</code>得到的字符串是去掉空白符号的，但是从ES10开始会保留这些空格，如果是原生函数则返回你控制台看到的效果，例子如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sum<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token comment">// "function sum(a, b) &#123;</span>
<span class="token comment">// 		return a + b;</span>
<span class="token comment">//  &#125;"</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>abs<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// "function abs() &#123; [native code] &#125;"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="try-catch"><a href="#try-catch" class="headerlink" title="try-catch"></a>try-catch</h3><p>在以往的版本中，<code>try-catch</code>里<code>catch</code>后面必须带异常参数，例如：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">    <span class="token comment">// ES10之前</span>
<span class="token keyword">try</span> <span class="token punctuation">&#123;</span>
      <span class="token comment">// tryCode</span>
<span class="token punctuation">&#125;</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token comment">// catchCode</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是在ES10之后，这个参数却不是必须的，如果用不到，我们可以不用传，例如：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">try</span> <span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Foobar'</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span> <span class="token keyword">catch</span> <span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'Bar'</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="BigInt"><a href="#BigInt" class="headerlink" title="BigInt"></a>BigInt</h3><p><strong>BigInt</strong> 是一种内置对象，它提供了一种方法来表示大于 <code>253 - 1</code> 的整数。这原本是 Javascript中可以用 <code>Number</code> 表示的最大数字。<strong>BigInt</strong> 可以表示任意大的整数。</p>
<p>可以用在一个整数字面量后面加 <code>n</code> 的方式定义一个 <code>BigInt</code> ，如：<code>10n</code>，或者调用函数<code>BigInt()</code>。</p>
<p>在以往的版本中，我们有以下的弊端：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 大于2的53次方的整数，无法保持精度</span>
<span class="token number">2</span> <span class="token operator">**</span> <span class="token number">53</span> <span class="token operator">===</span> <span class="token punctuation">(</span><span class="token number">2</span> <span class="token operator">**</span> <span class="token number">53</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
<span class="token comment">// 超过2的1024次方的数值，无法表示</span>
<span class="token number">2</span> <span class="token operator">**</span> <span class="token number">1024</span> <span class="token comment">// Infinity</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是在ES10引入<code>BigInt</code>之后，这个问题便得到了解决。</p>
<p>以下操作符可以和 <code>BigInt</code> 一起使用： <code>+</code>、<code>*</code>、<code>-</code>、<code>**</code>、<code>%</code> 。除 <code>&gt;&gt;&gt;</code> （无符号右移）之外的位操作也可以支持。因为 <code>BigInt</code> 都是有符号的， <code>&gt;&gt;&gt;</code> （无符号右移）不能用于 <code>BigInt</code>。<code>BigInt</code> 不支持单目 (<code>+</code>) 运算符。</p>
<p><code>/</code> 操作符对于整数的运算也没问题。可是因为这些变量是 <code>BigInt</code> 而不是 <code>BigDecimal</code> ，该操作符结果会向零取整，也就是说不会返回小数部分。</p>
<p><code>BigInt</code> 和 <code>Number</code>不是严格相等的，但是宽松相等的。</p>
<p>所以在<code>BigInt</code>出来以后，JS的原始类型便增加到了7个，如下：</p>
<ul>
<li>Boolean</li>
<li>Null</li>
<li>Undefined</li>
<li>Number</li>
<li>String</li>
<li>Symbol (ES6)</li>
<li>BigInt (ES10)</li>
</ul>
<h3 id="globalThis"><a href="#globalThis" class="headerlink" title="globalThis"></a>globalThis</h3><p><code>globalThis</code>属性包含类似于全局对象 <code>this</code>值。所以在全局环境下，我们有：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">globalThis <span class="token operator">===</span> <span class="token keyword">this</span> <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h3 id="import"><a href="#import" class="headerlink" title="import()"></a>import()</h3><p>静态的<code>import</code> 语句用于导入由另一个模块导出的绑定。无论是否声明了 严格模式，导入的模块都运行在严格模式下。在浏览器中，<code>import</code> 语句只能在声明了 <code>type=&quot;module&quot;</code> 的 <code>script</code> 的标签中使用。</p>
<p>但是在ES10之后，我们有动态 <code>import()</code>，它不需要依赖 <code>type=&quot;module&quot;</code> 的script标签。</p>
<p>所以我们有以下例子：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> main <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"main"</span><span class="token punctuation">)</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> link <span class="token keyword">of</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"nav > a"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      link<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
            e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

            <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'/modules/my-module.js'</span><span class="token punctuation">)</span>
              <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">module</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
                    module<span class="token punctuation">.</span><span class="token function">loadPageInto</span><span class="token punctuation">(</span>main<span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
              <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
                    main<span class="token punctuation">.</span>textContent <span class="token operator">=</span> err<span class="token punctuation">.</span>message<span class="token punctuation">;</span>
              <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="私有元素与方法"><a href="#私有元素与方法" class="headerlink" title="私有元素与方法"></a>私有元素与方法</h3><p>在ES10之前，如果我们要实现一个简单的计数器组件，我们可能会这么写：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// web component 写法</span>
<span class="token keyword">class</span> <span class="token class-name">Counter</span> <span class="token keyword">extends</span> <span class="token class-name">HTMLElement</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">get</span> <span class="token function">x</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> 
          	<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>xValue
      <span class="token punctuation">&#125;</span>
      <span class="token keyword">set</span> <span class="token function">x</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>xValue <span class="token operator">=</span> value
              window<span class="token punctuation">.</span><span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span>

      <span class="token function">clicked</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token operator">++</span>
      <span class="token punctuation">&#125;</span>

      <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>onclick <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clicked</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>xValue <span class="token operator">=</span> <span class="token number">0</span>
      <span class="token punctuation">&#125;</span>

      <span class="token function">connectedCallback</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> 
          	<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span>

      <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
window<span class="token punctuation">.</span>customElements<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">'num-counter'</span><span class="token punctuation">,</span> Counter<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>但是在ES10之后我们可以使用私有变量进行组件封装，如下：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">Counter</span> <span class="token keyword">extends</span> <span class="token class-name">HTMLElement</span> <span class="token punctuation">&#123;</span>
      #xValue <span class="token operator">=</span> <span class="token number">0</span>

      get <span class="token function">#x</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> 
          <span class="token keyword">return</span> #xValue
      <span class="token punctuation">&#125;</span>
      set <span class="token function">#x</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>#xValue <span class="token operator">=</span> value
            window<span class="token punctuation">.</span><span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">#render</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span>

      <span class="token function">#clicked</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>#x<span class="token operator">++</span>
      <span class="token punctuation">&#125;</span>

      <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>onclick <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">#clicked</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span>

      <span class="token function">connectedCallback</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> 
          	<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">#render</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span>

      <span class="token function">#render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>#x<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
window<span class="token punctuation">.</span>customElements<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">'num-counter'</span><span class="token punctuation">,</span> Counter<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h2><p><a target="_blank" rel="noopener" href="https://es6.ruanyifeng.com/#docs/">ECMAScript 6 入门</a></p>
<p><a target="_blank" rel="noopener" href="https://juejin.im/post/5d9bf530518825427b27639d">1.5万字概括ES6全部特性</a></p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">MDN</a></p>
<p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000013519526">ES2018 新特征之：非转义序列的模板字符串</a></p>
<p><a target="_blank" rel="noopener" href="https://esnext.justjavac.com/proposal/regexp-lookbehind.html">正则表达式反向(lookbehind)断言</a></p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode property escapes</a></p>
<p><a target="_blank" rel="noopener" href="https://esnext.justjavac.com/proposal/exponentiation-operator.html">exnext提案</a></p>
<p><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/JuWoahhnEunkOTi4qNtWQg">ES7、ES8、ES9、ES10新特性大盘点</a></p>
<p><a target="_blank" rel="noopener" href="https://github.com/tc39">Ecma TC39</a></p>
<p><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/b0877d1fc2a4">[ECMAScript] TC39 process</a></p>
<p><a target="_blank" rel="noopener" href="https://www.imooc.com/article/298026">从ES6到ES10的新特性万字大总结（不得不收藏）</a></p>

  </div>
  <div>
    
  </div>
</article>
<div class="nav">
  
    <div class="nav-item-prev">
      <a 
        href="/2022/01/15/javaScriptUnitTesting/" 
        class="nav-link">
        <i class="iconfont icon-left nav-prev-icon"></i>
        <div>
          <div class="nav-label">上一篇</div>
          
            <div class="nav-title">JavaScript单元测试 </div>
          
        </div>
      </a>
    </div>
  
  
    <div class="nav-item-next">
      <a 
        href="/2021/12/13/IndexedDBUsesSummary/" 
        class="nav-link">
        <div>
          <div class="nav-label">下一篇</div>
          
            <div class="nav-title">indexedDB 使用小结 </div>
          
        </div>
        <i class="iconfont icon-right nav-next-icon"></i>
      </a>
    </div>
  
</div>

<div 
  class="card card-content toc-card" 
  id="mobiletoc">
  <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%8B%E7%BB%8D"><span class="toc-text">介绍</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6-ES2015"><span class="toc-text">ES6(ES2015)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Let-%E5%92%8C-Const"><span class="toc-text">Let 和 Const</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%EF%BC%88Class%EF%BC%89"><span class="toc-text">类（Class）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%EF%BC%88Arrow-function%EF%BC%89"><span class="toc-text">箭头函数（Arrow function）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC%EF%BC%88Function-parameter-defaults%EF%BC%89"><span class="toc-text">函数参数默认值（Function parameter defaults）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88Template-string%EF%BC%89"><span class="toc-text">模板字符串（Template string）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%EF%BC%88Destructuring-assignment%EF%BC%89"><span class="toc-text">解构赋值（Destructuring assignment）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%EF%BC%88Module%EF%BC%89"><span class="toc-text">模块化（Module）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%A9%E5%B1%95%E6%93%8D%E4%BD%9C%E7%AC%A6%EF%BC%88Spread-operator%EF%BC%89"><span class="toc-text">扩展操作符（Spread operator）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E7%AE%80%E5%86%99%EF%BC%88Object-attribute-shorthand%EF%BC%89"><span class="toc-text">对象属性简写（Object attribute shorthand）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise"><span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#for%E2%80%A6of"><span class="toc-text">for…of</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Symbol"><span class="toc-text">Symbol</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%EF%BC%88Iterator%EF%BC%89-%E7%94%9F%E6%88%90%E5%99%A8%EF%BC%88Generator%EF%BC%89"><span class="toc-text">迭代器（Iterator）&#x2F; 生成器（Generator）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Set-WeakSet"><span class="toc-text">Set&#x2F;WeakSet</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Map-WeakMap"><span class="toc-text">Map&#x2F;WeakMap</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Proxy-Reflect"><span class="toc-text">Proxy&#x2F;Reflect</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Regex%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">Regex对象的扩展</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E6%96%B0%E5%A2%9E%E7%AC%A6%E5%8F%B7"><span class="toc-text">正则新增符号</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%94%B9%E4%B8%BA%E8%B0%83%E7%94%A8RegExp%E6%96%B9%E6%B3%95"><span class="toc-text">字符串方法的实现改为调用RegExp方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7"><span class="toc-text">正则新增属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Math%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">Math对象的扩展</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">Array对象的扩展</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES7-ES2016"><span class="toc-text">ES7(ES2016)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-prototype-includes"><span class="toc-text">Array.prototype.includes()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B9%82%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-text">幂运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88Template-string%EF%BC%89-1"><span class="toc-text">模板字符串（Template string）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES8-ES2017"><span class="toc-text">ES8(ES2017)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#async-await"><span class="toc-text">async&#x2F;await</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-values"><span class="toc-text">Object.values()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-entries"><span class="toc-text">Object.entries()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#padStart"><span class="toc-text">padStart()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#padEnd"><span class="toc-text">padEnd()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ShareArrayBuffer%EF%BC%88%E5%9B%A0%E5%AE%89%E5%85%A8%E9%97%AE%E9%A2%98%EF%BC%8C%E6%9A%82%E6%97%B6%E5%9C%A8Chrome%E8%B7%9FFireFox%E4%B8%AD%E8%A2%AB%E7%A6%81%E7%94%A8%EF%BC%89"><span class="toc-text">ShareArrayBuffer（因安全问题，暂时在Chrome跟FireFox中被禁用）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Atomics%E5%AF%B9%E8%B1%A1"><span class="toc-text">Atomics对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-getOwnPropertyDescriptors"><span class="toc-text">Object.getOwnPropertyDescriptors()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES9-ES2018"><span class="toc-text">ES9(ES2018)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#for-await%E2%80%A6of"><span class="toc-text">for await…of</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88Template-string%EF%BC%89-2"><span class="toc-text">模板字符串（Template string）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%8F%8D%E5%90%91-lookbehind-%E6%96%AD%E8%A8%80"><span class="toc-text">正则表达式反向(lookbehind)断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-Unicode-%E8%BD%AC%E4%B9%89"><span class="toc-text">正则表达式 Unicode 转义</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-s-dotAll-%E6%A8%A1%E5%BC%8F"><span class="toc-text">正则表达式 s&#x2F;dotAll 模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%91%BD%E5%90%8D%E6%8D%95%E8%8E%B7%E7%BB%84"><span class="toc-text">正则表达式命名捕获组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E6%89%A9%E5%B1%95%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">对象扩展操作符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise-prototype-finally"><span class="toc-text">Promise.prototype.finally()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES10-ES2019"><span class="toc-text">ES10(ES2019)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-prototype-flat-flatMap"><span class="toc-text">Array.prototype.flat() &#x2F; flatMap()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String-prototype-trimStart-trimLeft-trimEnd-trimRight"><span class="toc-text">String.prototype.trimStart() &#x2F; trimLeft() &#x2F; trimEnd() &#x2F; trimRight()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-fromEntries"><span class="toc-text">Object.fromEntries()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Symbol-prototype-description"><span class="toc-text">Symbol.prototype.description</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String-prototype-matchAll"><span class="toc-text">String.prototype.matchAll</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Function-prototype-toString-%E8%BF%94%E5%9B%9E%E6%B3%A8%E9%87%8A%E4%B8%8E%E7%A9%BA%E6%A0%BC"><span class="toc-text">Function.prototype.toString() 返回注释与空格</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#try-catch"><span class="toc-text">try-catch</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BigInt"><span class="toc-text">BigInt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#globalThis"><span class="toc-text">globalThis</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#import"><span class="toc-text">import()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A7%81%E6%9C%89%E5%85%83%E7%B4%A0%E4%B8%8E%E6%96%B9%E6%B3%95"><span class="toc-text">私有元素与方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-text">参考链接</span></a></li></ol>
</div></main>
            <aside class="left-column">
              
              <div class="card card-author">
                
  <img 
    src="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg" 
    class="author-img" 
    alt="author avatar">

<p class="author-name">霜序廿</p>
<p class="author-description">无限进步</p>
<div class="author-message">
  <a 
    class="author-posts-count" 
    href="/archives">
    <span>253</span>
    <span>文章</span>
  </a>
  <a 
    class="author-categories-count" 
    href="/categories">
    <span>6</span>
    <span>分类</span>
  </a>
  <a 
    class="author-tags-count" 
    href="/tags">
    <span>51</span>
    <span>标签</span>
  </a>
</div>

  <div class="author-card-society">
    
      <div class="author-card-society-icon">
        <a target="_blank" rel="noopener" href="https://github.com/shuangxunian">
          <i class="iconfont icon-github society-icon"></i>
        </a>
      </div>
    
      <div class="author-card-society-icon">
        <a target="_blank" rel="noopener" href="https://space.bilibili.com/391117803">
          <i class="iconfont icon-bilibili society-icon"></i>
        </a>
      </div>
    
  </div>

              </div>
               <div class="sticky-tablet">
  
  
    <article class="display-when-two-columns spacer">
      <div class="card card-content toc-card">
        <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%8B%E7%BB%8D"><span class="toc-text">介绍</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6-ES2015"><span class="toc-text">ES6(ES2015)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Let-%E5%92%8C-Const"><span class="toc-text">Let 和 Const</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%EF%BC%88Class%EF%BC%89"><span class="toc-text">类（Class）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%EF%BC%88Arrow-function%EF%BC%89"><span class="toc-text">箭头函数（Arrow function）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC%EF%BC%88Function-parameter-defaults%EF%BC%89"><span class="toc-text">函数参数默认值（Function parameter defaults）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88Template-string%EF%BC%89"><span class="toc-text">模板字符串（Template string）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%EF%BC%88Destructuring-assignment%EF%BC%89"><span class="toc-text">解构赋值（Destructuring assignment）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%EF%BC%88Module%EF%BC%89"><span class="toc-text">模块化（Module）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%A9%E5%B1%95%E6%93%8D%E4%BD%9C%E7%AC%A6%EF%BC%88Spread-operator%EF%BC%89"><span class="toc-text">扩展操作符（Spread operator）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E7%AE%80%E5%86%99%EF%BC%88Object-attribute-shorthand%EF%BC%89"><span class="toc-text">对象属性简写（Object attribute shorthand）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise"><span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#for%E2%80%A6of"><span class="toc-text">for…of</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Symbol"><span class="toc-text">Symbol</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%EF%BC%88Iterator%EF%BC%89-%E7%94%9F%E6%88%90%E5%99%A8%EF%BC%88Generator%EF%BC%89"><span class="toc-text">迭代器（Iterator）&#x2F; 生成器（Generator）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Set-WeakSet"><span class="toc-text">Set&#x2F;WeakSet</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Map-WeakMap"><span class="toc-text">Map&#x2F;WeakMap</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Proxy-Reflect"><span class="toc-text">Proxy&#x2F;Reflect</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Regex%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">Regex对象的扩展</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E6%96%B0%E5%A2%9E%E7%AC%A6%E5%8F%B7"><span class="toc-text">正则新增符号</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%94%B9%E4%B8%BA%E8%B0%83%E7%94%A8RegExp%E6%96%B9%E6%B3%95"><span class="toc-text">字符串方法的实现改为调用RegExp方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7"><span class="toc-text">正则新增属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Math%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">Math对象的扩展</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">Array对象的扩展</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES7-ES2016"><span class="toc-text">ES7(ES2016)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-prototype-includes"><span class="toc-text">Array.prototype.includes()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B9%82%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-text">幂运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88Template-string%EF%BC%89-1"><span class="toc-text">模板字符串（Template string）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES8-ES2017"><span class="toc-text">ES8(ES2017)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#async-await"><span class="toc-text">async&#x2F;await</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-values"><span class="toc-text">Object.values()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-entries"><span class="toc-text">Object.entries()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#padStart"><span class="toc-text">padStart()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#padEnd"><span class="toc-text">padEnd()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ShareArrayBuffer%EF%BC%88%E5%9B%A0%E5%AE%89%E5%85%A8%E9%97%AE%E9%A2%98%EF%BC%8C%E6%9A%82%E6%97%B6%E5%9C%A8Chrome%E8%B7%9FFireFox%E4%B8%AD%E8%A2%AB%E7%A6%81%E7%94%A8%EF%BC%89"><span class="toc-text">ShareArrayBuffer（因安全问题，暂时在Chrome跟FireFox中被禁用）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Atomics%E5%AF%B9%E8%B1%A1"><span class="toc-text">Atomics对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-getOwnPropertyDescriptors"><span class="toc-text">Object.getOwnPropertyDescriptors()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES9-ES2018"><span class="toc-text">ES9(ES2018)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#for-await%E2%80%A6of"><span class="toc-text">for await…of</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88Template-string%EF%BC%89-2"><span class="toc-text">模板字符串（Template string）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%8F%8D%E5%90%91-lookbehind-%E6%96%AD%E8%A8%80"><span class="toc-text">正则表达式反向(lookbehind)断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-Unicode-%E8%BD%AC%E4%B9%89"><span class="toc-text">正则表达式 Unicode 转义</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-s-dotAll-%E6%A8%A1%E5%BC%8F"><span class="toc-text">正则表达式 s&#x2F;dotAll 模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%91%BD%E5%90%8D%E6%8D%95%E8%8E%B7%E7%BB%84"><span class="toc-text">正则表达式命名捕获组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E6%89%A9%E5%B1%95%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">对象扩展操作符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise-prototype-finally"><span class="toc-text">Promise.prototype.finally()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES10-ES2019"><span class="toc-text">ES10(ES2019)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-prototype-flat-flatMap"><span class="toc-text">Array.prototype.flat() &#x2F; flatMap()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String-prototype-trimStart-trimLeft-trimEnd-trimRight"><span class="toc-text">String.prototype.trimStart() &#x2F; trimLeft() &#x2F; trimEnd() &#x2F; trimRight()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-fromEntries"><span class="toc-text">Object.fromEntries()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Symbol-prototype-description"><span class="toc-text">Symbol.prototype.description</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String-prototype-matchAll"><span class="toc-text">String.prototype.matchAll</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Function-prototype-toString-%E8%BF%94%E5%9B%9E%E6%B3%A8%E9%87%8A%E4%B8%8E%E7%A9%BA%E6%A0%BC"><span class="toc-text">Function.prototype.toString() 返回注释与空格</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#try-catch"><span class="toc-text">try-catch</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BigInt"><span class="toc-text">BigInt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#globalThis"><span class="toc-text">globalThis</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#import"><span class="toc-text">import()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A7%81%E6%9C%89%E5%85%83%E7%B4%A0%E4%B8%8E%E6%96%B9%E6%B3%95"><span class="toc-text">私有元素与方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-text">参考链接</span></a></li></ol>
      </div>
    </article>
  
  
  <article class="card card-content categories-widget">
    <div class="categories-card">
  <div class="categories-header">
    <i 
      class="iconfont icon-fenlei" 
      style="padding-right: 2px;">
    </i>分类
  </div>
  <div class="categories-list">
    
      <a href="/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/">
        <div class="categories-list-item">
          技术文章
          <span class="categories-list-item-badge">218</span>
        </div>
      </a>
    
      <a href="/categories/%E5%85%B6%E4%BB%96/">
        <div class="categories-list-item">
          其他
          <span class="categories-list-item-badge">16</span>
        </div>
      </a>
    
      <a href="/categories/%E6%97%85%E6%B8%B8/">
        <div class="categories-list-item">
          旅游
          <span class="categories-list-item-badge">1</span>
        </div>
      </a>
    
      <a href="/categories/%E7%AE%97%E6%B3%95/">
        <div class="categories-list-item">
          算法
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
      <a href="/categories/%E8%80%83%E8%AF%95/">
        <div class="categories-list-item">
          考试
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
      <a href="/categories/%E9%98%85%E8%AF%BB/">
        <div class="categories-list-item">
          阅读
          <span class="categories-list-item-badge">1</span>
        </div>
      </a>
    
  </div>
</div>
  </article>
  
  <article class="card card-content tags-widget">
    <div class="tags-card">
  <div class="tags-header">
    <i 
      class="iconfont icon-biaoqian" 
      style="padding-right: 2px;">
    </i>热门标签
  </div>
  <div class="tags-list">
    
      <a 
        href="/tags/js/" 
        title="js">
        <div class="tags-list-item">js</div>
      </a>
    
      <a 
        href="/tags/vue/" 
        title="vue">
        <div class="tags-list-item">vue</div>
      </a>
    
      <a 
        href="/tags/%E9%9D%A2%E8%AF%95/" 
        title="面试">
        <div class="tags-list-item">面试</div>
      </a>
    
      <a 
        href="/tags/css/" 
        title="css">
        <div class="tags-list-item">css</div>
      </a>
    
      <a 
        href="/tags/%E7%BD%91%E7%BB%9C/" 
        title="网络">
        <div class="tags-list-item">网络</div>
      </a>
    
      <a 
        href="/tags/%E5%85%B6%E4%BB%96/" 
        title="其他">
        <div class="tags-list-item">其他</div>
      </a>
    
      <a 
        href="/tags/%E7%AE%97%E6%B3%95/" 
        title="算法">
        <div class="tags-list-item">算法</div>
      </a>
    
      <a 
        href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" 
        title="浏览器">
        <div class="tags-list-item">浏览器</div>
      </a>
    
      <a 
        href="/tags/html/" 
        title="html">
        <div class="tags-list-item">html</div>
      </a>
    
      <a 
        href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" 
        title="操作系统">
        <div class="tags-list-item">操作系统</div>
      </a>
    
      <a 
        href="/tags/%E8%80%83%E8%AF%95/" 
        title="考试">
        <div class="tags-list-item">考试</div>
      </a>
    
      <a 
        href="/tags/%E8%BD%AF%E5%AE%9E%E5%8A%9B/" 
        title="软实力">
        <div class="tags-list-item">软实力</div>
      </a>
    
      <a 
        href="/tags/DOM/" 
        title="DOM">
        <div class="tags-list-item">DOM</div>
      </a>
    
      <a 
        href="/tags/%E8%BD%AE%E5%AD%90/" 
        title="轮子">
        <div class="tags-list-item">轮子</div>
      </a>
    
      <a 
        href="/tags/%E7%BD%91%E7%BB%9C%E5%8E%9F%E7%90%86/" 
        title="网络原理">
        <div class="tags-list-item">网络原理</div>
      </a>
    
      <a 
        href="/tags/debug/" 
        title="debug">
        <div class="tags-list-item">debug</div>
      </a>
    
  </div>
</div>
  </article>
  
  
</div>
            </aside>
            <aside class="right-column">
              <div class="sticky-widescreen">
  
  
    <article class="card card-content toc-card">
      <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%8B%E7%BB%8D"><span class="toc-text">介绍</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6-ES2015"><span class="toc-text">ES6(ES2015)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Let-%E5%92%8C-Const"><span class="toc-text">Let 和 Const</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%EF%BC%88Class%EF%BC%89"><span class="toc-text">类（Class）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%EF%BC%88Arrow-function%EF%BC%89"><span class="toc-text">箭头函数（Arrow function）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E9%BB%98%E8%AE%A4%E5%80%BC%EF%BC%88Function-parameter-defaults%EF%BC%89"><span class="toc-text">函数参数默认值（Function parameter defaults）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88Template-string%EF%BC%89"><span class="toc-text">模板字符串（Template string）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%EF%BC%88Destructuring-assignment%EF%BC%89"><span class="toc-text">解构赋值（Destructuring assignment）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%EF%BC%88Module%EF%BC%89"><span class="toc-text">模块化（Module）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%A9%E5%B1%95%E6%93%8D%E4%BD%9C%E7%AC%A6%EF%BC%88Spread-operator%EF%BC%89"><span class="toc-text">扩展操作符（Spread operator）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E7%AE%80%E5%86%99%EF%BC%88Object-attribute-shorthand%EF%BC%89"><span class="toc-text">对象属性简写（Object attribute shorthand）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise"><span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#for%E2%80%A6of"><span class="toc-text">for…of</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Symbol"><span class="toc-text">Symbol</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%EF%BC%88Iterator%EF%BC%89-%E7%94%9F%E6%88%90%E5%99%A8%EF%BC%88Generator%EF%BC%89"><span class="toc-text">迭代器（Iterator）&#x2F; 生成器（Generator）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Set-WeakSet"><span class="toc-text">Set&#x2F;WeakSet</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Map-WeakMap"><span class="toc-text">Map&#x2F;WeakMap</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Proxy-Reflect"><span class="toc-text">Proxy&#x2F;Reflect</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Regex%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">Regex对象的扩展</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E6%96%B0%E5%A2%9E%E7%AC%A6%E5%8F%B7"><span class="toc-text">正则新增符号</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%94%B9%E4%B8%BA%E8%B0%83%E7%94%A8RegExp%E6%96%B9%E6%B3%95"><span class="toc-text">字符串方法的实现改为调用RegExp方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7"><span class="toc-text">正则新增属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Math%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">Math对象的扩展</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">Array对象的扩展</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES7-ES2016"><span class="toc-text">ES7(ES2016)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-prototype-includes"><span class="toc-text">Array.prototype.includes()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B9%82%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-text">幂运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88Template-string%EF%BC%89-1"><span class="toc-text">模板字符串（Template string）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES8-ES2017"><span class="toc-text">ES8(ES2017)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#async-await"><span class="toc-text">async&#x2F;await</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-values"><span class="toc-text">Object.values()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-entries"><span class="toc-text">Object.entries()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#padStart"><span class="toc-text">padStart()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#padEnd"><span class="toc-text">padEnd()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ShareArrayBuffer%EF%BC%88%E5%9B%A0%E5%AE%89%E5%85%A8%E9%97%AE%E9%A2%98%EF%BC%8C%E6%9A%82%E6%97%B6%E5%9C%A8Chrome%E8%B7%9FFireFox%E4%B8%AD%E8%A2%AB%E7%A6%81%E7%94%A8%EF%BC%89"><span class="toc-text">ShareArrayBuffer（因安全问题，暂时在Chrome跟FireFox中被禁用）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Atomics%E5%AF%B9%E8%B1%A1"><span class="toc-text">Atomics对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-getOwnPropertyDescriptors"><span class="toc-text">Object.getOwnPropertyDescriptors()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES9-ES2018"><span class="toc-text">ES9(ES2018)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#for-await%E2%80%A6of"><span class="toc-text">for await…of</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88Template-string%EF%BC%89-2"><span class="toc-text">模板字符串（Template string）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%8F%8D%E5%90%91-lookbehind-%E6%96%AD%E8%A8%80"><span class="toc-text">正则表达式反向(lookbehind)断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-Unicode-%E8%BD%AC%E4%B9%89"><span class="toc-text">正则表达式 Unicode 转义</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-s-dotAll-%E6%A8%A1%E5%BC%8F"><span class="toc-text">正则表达式 s&#x2F;dotAll 模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%91%BD%E5%90%8D%E6%8D%95%E8%8E%B7%E7%BB%84"><span class="toc-text">正则表达式命名捕获组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E6%89%A9%E5%B1%95%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-text">对象扩展操作符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise-prototype-finally"><span class="toc-text">Promise.prototype.finally()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES10-ES2019"><span class="toc-text">ES10(ES2019)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-prototype-flat-flatMap"><span class="toc-text">Array.prototype.flat() &#x2F; flatMap()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String-prototype-trimStart-trimLeft-trimEnd-trimRight"><span class="toc-text">String.prototype.trimStart() &#x2F; trimLeft() &#x2F; trimEnd() &#x2F; trimRight()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-fromEntries"><span class="toc-text">Object.fromEntries()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Symbol-prototype-description"><span class="toc-text">Symbol.prototype.description</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String-prototype-matchAll"><span class="toc-text">String.prototype.matchAll</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Function-prototype-toString-%E8%BF%94%E5%9B%9E%E6%B3%A8%E9%87%8A%E4%B8%8E%E7%A9%BA%E6%A0%BC"><span class="toc-text">Function.prototype.toString() 返回注释与空格</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#try-catch"><span class="toc-text">try-catch</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BigInt"><span class="toc-text">BigInt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#globalThis"><span class="toc-text">globalThis</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#import"><span class="toc-text">import()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A7%81%E6%9C%89%E5%85%83%E7%B4%A0%E4%B8%8E%E6%96%B9%E6%B3%95"><span class="toc-text">私有元素与方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-text">参考链接</span></a></li></ol>
    </article>
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    <i 
      class="iconfont icon-wenzhang_huaban" 
      style="padding-right: 2px;">
    </i>最近文章
  </div>
  <div class="recent-posts-list">
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-05-01</div>
        <a href="/2022/05/01/typescriptHome/"><div class="recent-posts-item-content">typescript</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptTheVariousWaysAndAdvantagesAndDisadvantagesOfDeepInheritance/"><div class="recent-posts-item-content">JavaScript深入之继承的多种方式和优缺点</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptGoFromPrototypeToPrototypeChain/"><div class="recent-posts-item-content">JavaScript深入之从原型到原型链</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptMemoryLeakTutorial/"><div class="recent-posts-item-content">JavaScript 内存泄漏教程</div></a>
      </div>
    
  </div>
</div>
  </article>
  
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    关注嘉然！顿顿解馋！
  </div>
  <div class="recent-posts-list">
    
      <img 
        src="https://api2.mubu.com/v3/document_image/2697c6ae-10ee-41a3-9099-304bdb252d31-3807603.jpg" 
        class="myadd-img" 
        alt="author avatar">
    
  </div>
</div>
  </article>
</div>
            </aside>
          </div>
        </div>
      </div>
    </div>
     
    <footer class="footer">
  <div class="footer-container">
    <div>
      <div class="footer-dsc">
        <span>
          Copyright ©
          
            2020 -
          
          2022
        </span>
        &nbsp;
        <a 
          href="/" 
          class="footer-link">
          霜序廿的个人网站
        </a>
      </div>
    </div>

    
      <div class="footer-dsc">
        
          Powered by
          <a 
            href="https://hexo.io/" 
            class="footer-link" 
            target="_blank" 
            rel="nofollow noopener noreferrer">
            &nbsp;Hexo
          </a>
        
        
          <span>&nbsp;|&nbsp;</span>
        
        
          Theme -
          <a 
            href="https://github.com/theme-kaze" 
            class="footer-link" 
            target="_blank"
            rel="nofollow noopener noreferrer">
            &nbsp;Kaze
          </a>
        
      </div>
    
    
    
    
</footer> 
    
  <a 
    role="button" 
    id="scrollbutton" 
    class="basebutton" 
    aria-label="回到顶部">
    <i class="iconfont icon-arrowleft button-icon"></i>
  </a>

<a 
  role="button" 
  id="menubutton" 
  class="basebutton">
  <i class="iconfont icon-menu button-icon"></i>
</a>
<a 
  role="button" 
  id="popbutton" 
  class="basebutton" 
  aria-label="控制中心">
  <i class="iconfont icon-expand button-icon"></i>
</a>
<a 
  role="button" 
  id="darkbutton" 
  class="basebutton darkwidget" 
  aria-label="夜色模式">
  <i class="iconfont icon-weather button-icon"></i>
</a>
<a 
  role="button" 
  id="searchbutton" 
  class="basebutton searchwidget" 
  aria-label="搜索">
  <i class="iconfont icon-search button-icon"></i>
</a> 
     
     
     
      <script>
  var addImgLayout = function () {
    var img = document.querySelectorAll('.post-content img')
    var i
    for (i = 0; i < img.length; i++) {
      var wrapper = document.createElement('a')
      wrapper.setAttribute('href', img[i].getAttribute('data-src'))
      wrapper.setAttribute('aria-label', 'illustration')
      wrapper.style.cssText =
        'width: 100%; display: flex; justify-content: center;'
      if (img[i].alt) wrapper.dataset.caption = img[i].alt
      wrapper.dataset.nolink = true
      img[i].before(wrapper)
      wrapper.append(img[i])
      var divWrap = document.createElement('div')
      divWrap.classList.add('gallery')
      wrapper.before(divWrap)
      divWrap.append(wrapper)
    }
    baguetteBox.run('.gallery')
  }
</script>
<script>
  loadScript(
    "/js/lib/lightbox/baguetteBox.min.js",
    addImgLayout
  )
</script>
 
     
     
    <script src="/js/main.js"></script> 
     
    
      <script>
        var addLazyload = function () {
          var observer = lozad('.lozad', {
            load: function (el) {
              el.srcset = el.getAttribute('data-src')
            },
            loaded: function (el) {
              el.classList.add('loaded')
            },
          })
          observer.observe()
        }
      </script>
      <script>
        loadScript('/js/lib/lozad.min.js', addLazyload)
      </script>
     
    
    
  </body>
</html>
